<template>
    <el-card>
        <el-table :data="sourceData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="100">
                <template v-slot="{ row }">
                    <Image
                        :src="row.main_img"
                        style="
                            --wh: 70px;
                            width: var(--wh);
                            height: var(--wh);
                            object-fit: cover;
                        "
                    />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="Name">
                <template #default="{ row }">
                    {{ row.title }}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="Address" width="200">
                <el-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    class="mx-1"
                    effect="dark"
                >
                    {{ item.label }}
                </el-tag>
            </el-table-column>
            <el-table-column
                prop="address"
                label="分类"
                width="100"
                align="center"
            >
                <el-text class="mx-1">Golang</el-text>
            </el-table-column>

            <el-table-column
                prop="address"
                label="状态"
                width="100"
                align="center"
            >
                <div class="state"><el-text class="mx-1">发布中</el-text></div>
            </el-table-column>
            <el-table-column
                prop="address"
                label="创建时间"
                width="200"
                align="center"
            >
                <el-text class="mx-1">2023-09-10 20:30</el-text>
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="200"
                align="center"
            >
                <template #default="{ row }">
                    <el-button type="primary" :icon="Edit" text>编辑</el-button>
                    <!-- <el-button type="primary" :icon="Share" /> -->
                    <el-popconfirm
                        @confirm="deleteAction(row.id)"
                        title="是否删除?"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        icon-color="red"
                    >
                        <template #reference>
                            <el-button
                                type="danger"
                                :icon="Delete"
                                text
                                :loading="
                                    buttonLoading && buttonLoading[row.id]
                                "
                                >删除</el-button
                            >
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            ref="paginationRef"
            style="margin-top: 10px"
            background
            v-model:current-page="currentPage1"
            :page-size="100"
            :small="small"
            :disabled="disabled"
            layout="prev, pager, next , total"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >664654</el-pagination
        >
    </el-card>
</template>
<script lang="ts" setup>
import { ref, watchEffect, nextTick, onMounted, reactive } from "vue"
import type { API } from "@/types/articles"
import { GetLists } from "@/api/articles"
import Image from "@/components/image/Index.vue"
import type { TagProps } from "element-plus"
import { Delete, Edit } from "@element-plus/icons-vue"

const paginationRef = ref()
const buttonLoading = reactive<boolean[]>([])
const currentPage1 = ref(5)
const small = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number): void => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number): void => {
    console.log(`current page: ${val}`)
    console.log(paginationRef)
}

interface Item {
    type: TagProps["type"]
    label: string
}
const sourceData = ref<API.ListInfo[]>()
const items = ref<Item[]>([
    { type: "", label: "Tag 1" },
    { type: "success", label: "Tag 2" },
    { type: "info", label: "Tag 3" },
    // { type: "danger", label: "Tag 4" },
    // { type: "warning", label: "Tag 5" },
])
watchEffect(async () => {
    const { data } = await GetLists()
    sourceData.value = data
    await nextTick
    console.log(sourceData.value)
})

// 操作
const deleteAction = (id: number): void => {
    buttonLoading[id] = true
    setTimeout(() => {
        buttonLoading[id] = false
        sourceData.value = sourceData.value?.filter((item) => item.id !== id)
    }, 2000)
}

onMounted(async () => {})
</script>

<style scoped lang="scss">
.state {
    &:before {
        --state-color: #08df5b;
        --vh: 7px;
        content: "";
        width: var(--vh);
        height: var(--vh);
        border-radius: 50%;
        background-color: var(--state-color);
        margin-bottom: 2px;
        display: inline-block;
    }
}
</style>
